<template>
   <div class="model">
      <div class="box" v-if="!successlogin">
         <p class="title">{{message}}</p>
         <div class="btn">
            <el-button type="warning" @click="_close">确定</el-button>
         </div>
      </div>
      <div v-else class="success-login">
         <div>
            <p class="title">{{message}}</p>
            <p class="info">{{isTime}}秒后返回之前的页面</p>
            <div class="btn">
               <el-button type="success" @click="_returnHomePage">返回首页</el-button>
            </div>
         </div>
      </div>
   </div>
</template>

<script>
   import {mapGetters} from 'vuex'
   export default {
      name: 'ModalFrameBox',
      data() {
         return {
            isTime: 0,
            time: null,
         }
      },
      props: {
         message: {
            type: String,
            default() {
               return ''
            }
         },
         successlogin: {
            type: Boolean,
            default() {
               return false
            }
         }
      },
      computed: {
         ...mapGetters(['beforeRouter'])
      },
      mounted() {
         this._initElement()
      },
      methods: {
         _initElement() {
            this.body = document.querySelector('body')
            this.body.style.overflow = 'hidden'
         },
         _close(isclose) {
            if (isclose) clearInterval(this.time)
            this.body.removeAttribute('style')
            this.$emit('closeModel')
         },
         _success(isclose) {
            this.time = setInterval(() => {
               if (this.isTime === 3) {
                  this._close(true)
                  this.$router.push({path: this.beforeRouter})
                  this.isTime = 0
                  return
               }
               this.isTime++
            }, 1000)
         },
         _returnHomePage() {
            this.$router.push({path: '/'})
            this._close(true)
            this.$emit('isCloseReturn', true)
            this.$emit('isOpenReturn', false)
         }
      }
   }
</script>

<style scoped lang="stylus">
   .model
      right 0
      left 0
      top 0
      bottom 0
      background rgba(0, 0, 0, 0.5)
      overflow-y hidden
      position fixed
      z-index 2000
   .box,.success-login
      position absolute
      left 1px
      right 1px
      bottom 1px
      top 1px
      margin auto
      height 150px
      border-radius 10px
      background white
      width 250px
   .btn
      width 100%
      display flex
      justify-content center
      position absolute
      bottom 10px
   .title
      font-size 20px
      color red
      /*font-weight bold*/
      letter-spacing 3px
      margin-top 20px
      text-align center
   .success-login div
      p
         width 100%
         text-align center
         font-size 16px
      .title
         font-size 14px
         color #bbbbbb
      .info
         color #ff8f0e
      display flex
      flex-wrap wrap
      justify-content center
</style>
